<!-- 充值 -->
<template>
    <view>
        <public-module></public-module>
        <wlk-navbar title="充值" navbarType='3'></wlk-navbar>
        <view class="wallet-card bgw mt40 relative overHidden shadow">
            <view class="title">钱包余额（元）</view>
            <view class="num mt20">
                {{userInfo.money}}
            </view>
            <view class="icon">
                <u-icon name="rmb-circle" color="#FFFFFF" size="20"></u-icon>
            </view>
            <view class="log-btn center shadow" @tap="$Router.push({ path: '/pages/wallet/recharge-log' })">充值记录</view>
        </view>
        <view class="price-card pd30">
            <view class="card-title">余额充值</view>
            <view class="mt30">
                <u--input
                        type="number"
                        v-model="money"
                        prefixIcon="rmb"
                        fontSize="42rpx"
                        :customStyle="{
                            backgroundColor:'#F8F8F8',
                            padding:'20rpx 10rpx',
                            borderRadius:'8px'
                        }"
                        placeholderStyle="font-size:30rpx;color:#c0c4cc"
                        :prefixIconStyle="'font-size: 44rpx;font-weight: bold;'+'color: '+themeColor"
                        placeholder="请输入充值金额"
                        border="none"
                        @change="changeInput"
                        clearable
                ></u--input>
            </view>
            <view class="wlkflex justify-between  mt30 money-box wrap">
                <view v-for="(item,index) in initRecharge.recharge_reward"
                      :style="choseMoney === index?'background-color:'+bgColor+';color:'+themeColor+';border-color:'+themeColor:[]"
                      class="money-item relative center mb30"
                      :key="index" @tap="selectCard(index)">
                  <view class="price">
                    {{ item.charge }}
                    <text class="desc ml10">元</text>
                  </view>
                  <view v-if="!$u.test.isEmpty(item.couponIds)" :style="choseMoney === index?'background-color:'+themeColor:'background-color:#c6c4c5'"
                        class="give">
                    赠{{ item.couponIds.length }}张券
                  </view>
                </view>
            </view>
          <view class="mt40">
            <u-button :color="linearColor" :customStyle="{
			        width:'92%',
			        boxShadow:boxShadow
                }" :disabled="money<=0" shape="circle" size="large" text="确认充值"
                      @tap="confirm"></u-button>
          </view>
        </view>
      <view v-if="!$u.test.isEmpty(initRecharge.recharge_text)" class="bz-card pd30">
        <view class="remark">
          <view class="title">充值说明</view>
          <view class="content mt30">
            <u-parse :content="parseTextWithNewlines(initRecharge.recharge_text)"></u-parse>
          </view>
        </view>
      </view>
    </view>
</template>

<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    import {rgbaToRgb,toUrl} from '@/wlkutils/tools';
    export default {
        components: {},
        data() {
            return {
                money: '',
                showModal: false,
                showKeyboard:false,
                choseMoney: '',
                bgColor:'',
                color:'',
                linearColor:'',
                boxShadow:'0 2px 4px rgba(0,0,0,.06)',
            };
        },
        computed: {
            ...mapGetters(['userInfo', 'initRecharge','themeColor'])
        },
        mounted() {},
        onLoad() {},
        onShow() {
            this.bgColor = uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.2);
            this.linearColor = 'linear-gradient(to right,'+this.themeColor+' ,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.75)+')';
            this.color = uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.65);
            this.boxShadow = '0px 5px 5px '+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), .2);
        },
        watch:{
            themeColor(val) {
                this.bgColor = uni.$u.colorToRgba(rgbaToRgb(val), 0.2);
                this.linearColor = 'linear-gradient(to right,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.75)+')';
                this.color = uni.$u.colorToRgba(rgbaToRgb(val), 0.65);
                this.boxShadow = '0px 5px 5px '+ uni.$u.colorToRgba(rgbaToRgb(val), .2);
            },
        },
        methods: {
            parseTextWithNewlines(text) {
                return text.replace(/\n/g, "<br>");
            },
            changeInput(v){
                const index = this.initRecharge.recharge_reward.findIndex(item => item.charge == v);
                if (index!=-1) {
                    this.choseMoney = index;
                }else{
                    this.choseMoney = '';
                }
            },
            selectCard(index) {
                this.choseMoney = index;
                this.money = this.initRecharge.recharge_reward[index].charge;
            },
            confirm() {
                let that = this;
                if (this.money <= 0) {
                    this.$u.toast('请选择或输入充值金额');
                    return;
                }
                if (!uni.$u.test.digits(this.money)){
                    this.$u.toast('请输入整数充值金额');
                    return;
                }
                uni.$u.http.post('recharge/confirm', {
                    money: that.money
                }).then(res => {
                    that.money = '';
                    that.$Router.replace({
                        path: '/pages/pay/pay',
                        query: {
                            id:res.data.order_id,
                            type:'recharge'
                        }
                    })
                }).catch(res => {
                })


            },


        }
    };
</script>

<style lang="scss">
    page{
        .wallet-card{
            width: 92%;
            margin: 40rpx auto auto auto;
            height: 300rpx;
            border-radius: 20px;
            background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
            padding: 50rpx 35rpx;
            .title{
                font-size: $font-lt;
            }
            .num{
                font-size: 50rpx;
                font-weight: bold;
            }
            .icon{
                background: linear-gradient(to left bottom, #ffae86, #ff7d67);
                padding: 15rpx 30rpx;
                border-radius: 20px 0 20px 4px;
                overflow: hidden;
                display: flex;
                align-items: center;
                position: absolute;
                bottom: 0;
                right: 0;
                box-shadow: -8px 3px 0 #F6E8E5;
            }
            .log-btn{
                padding: 10rpx 20rpx;
                border-radius: 40rpx 0 0 40rpx;
                position: absolute;
                right: 0;
                top: 50rpx;
                background-color: #FFFFFF;
                color: $uni-text-color-grey;
                border-right: none;
                font-size: $font-sm;
            }
        }
        .price-card{
            background-color: #FFFFFF;
            width: 92%;
            margin: 40rpx auto auto auto;
            border-radius: 12rpx;
            .card-title{
                font-size: $font-lt;
                font-weight: 500;
            }
            .money-box{

            }
            /* 当视图数量不够一行时，进行补位 */
            .money-box::after {
                content: "";
                flex-basis: calc(33.33% - 10px); /* 填充视图的宽度 */
                margin-bottom: 10px;
            }
            .money-item{
                /*width: 30.5%;*/
                border-style: solid;
                border-width: 2px;
                border-color: #f9f9f9;
                padding: 40rpx 0;
                background-color: #f9f9f9;
                border-radius: 12px;
                flex-basis: calc(33.33% - 10px); /* 每个视图的基础宽度 */

                .price{
                    font-size: 38rpx;
                    .desc{
                        font-size:$font-sm;
                    }
                }
            }
            .money-item:nth-of-type(3n) {
                margin-right: 0; /* 移除每一行最后一个视图的右边距 */
            }
            .give{
                position: absolute;
                right: -2px;
                bottom: -2px;
                font-size: $font-sm;
                color: #FFFFFF;
                border-radius: 20rpx 0 8px 0;
                padding: 5rpx 10rpx;
                font-weight: normal;
            }
        }
        .bz-card{
            background-color: #FFFFFF;
            border-radius: 12rpx;
            width: 92%;
            margin: 40rpx auto auto auto;
            .remark{
                .title{
                    font-size: $font-lt;
                    font-weight: 500;
                }
                .content{
                    color: $uni-text-color-grey;
                    font-size: $font-sm;
                }
            }
        }
        .active{
            border: 1px saddlebrown solid;
        }
    }


</style>
